변수 가시성

AI
qwen-3-235b-a22b-instruct-2507
작성자
익명
작성일
2025.09.01
조회수
11
버전
v1
기술 → 프로그래밍 → JavaScript
변수 가시성 스코프 let const var 클로저 호이스팅

변수 가시성

JavaScript에서 변수 가시성(Variable Visibility은 특정 변수가의 어느 부분에서 접근 가능하고 사용될 수 있는 결정하는 중요한 개념이다 변수의 가시성은가 어디서 선되었는지, 그리고 어떤 스코프(scope)에 속해 있는지에 따라 달라진다. 이 문서에서는의 변수 가시에 대해 깊이 있게 다루, var, let, `` 키워드의 차이, 스코프의 종류, 클로저(closure), 호이스팅(hoisting) 등의 관련 개념을 설명한다.

개요

변수 가시성은 프로그래밍 언어에서 변수의 생명주기와 접근 권한을 정의하는 핵심 요소다. JavaScript는 함수 기반 스코프와 블록 기반 스코프를 모두 지원하며, ES6(ECMAScript 2015) 이전과 이후의 문법 변화로 인해 변수 가시성의 동작 방식이 크게 달라졌다. 잘못 이해하면 예기치 않은 버그나 메모리 누수를 초래할 수 있으므로, 변수 가시성에 대한 명확한 이해는 JavaScript 개발에 필수적이다.

스코프의 종류

JavaScript에서 변수는 다음 세 가지 주요 스코프에 따라 가시성이 결정된다.

1. 전역 스코프 (Global Scope)

전역 스코프에 선언된 변수는 프로그램의 어디에서나 접근할 수 있다. 일반적으로 스크립트 최상위 레벨에서 선언된 변수가 이에 해당한다.

var globalVar = "전역 변수";

function myFunction() {
    console.log(globalVar); // "전역 변수" 출력
}

myFunction();
console.log(globalVar); // "전역 변수" 출력

⚠️ 주의: 전역 변수는 모든 코드에서 접근 가능하므로, 의도치 않게 덮어쓰거나 충돌이 발생할 수 있다. 가능하면 전역 변수 사용을 지양해야 한다.

2. 함수 스코프 (Function Scope)

var 키워드로 선언된 변수는 함수 내에서만 접근 가능하며, 이를 함수 스코프라고 한다. 함수 외부에서는 해당 변수에 접근할 수 없다.

function example() {
    var functionVar = "함수 스코프 변수";
    console.log(functionVar); // 정상 출력
}

example();
// console.log(functionVar); // ReferenceError: functionVar is not defined

3. 블록 스코프 (Block Scope)

ES6에서 도입된 let과 const는 블록 스코프를 따른다. if, for, {} 등의 중괄호 블록 내에서 선언된 변수는 해당 블록 내에서만 접근 가능하다.

if (true) {
    let blockVar = "블록 스코프 변수";
    const blockConst = "상수 블록 변수";
    console.log(blockVar);     // 정상 출력
    console.log(blockConst);   // 정상 출력
}

// console.log(blockVar);     // ReferenceError
// console.log(blockConst);   // ReferenceError

var, let, const의 가시성 차이

키워드 스코프 유형 호이스팅 재선언 가능 재할당 가능
var 함수 스코프 O (undefined) O O
let 블록 스코프 O (TDZ*) X O
const 블록 스코프 O (TDZ) X X

* TDZ(Temporal Dead Zone): 변수가 호이스팅되었지만 초기화되기 전까지 접근 불가능한 구역.

예시: var와 let의 차이

console.log(varExample); // undefined (호이스팅됨)
console.log(letExample); //Error: TDZ

var varExample = "var";
let letExample = "let";

이처럼 var는 호이스팅 시 undefined로 초기화되지만, let과 const는 호이스팅되더라도 초기화 전까지 접근이 금지된다.

클로저와 변수 가시성

클로저(Closure)는 내부 함수가 외부 함수의 변수를 참조할 수 있는 JavaScript의 특성이다. 이는 변수 가시성의 중요한 응용 사례다.

function outer() {
    let outerVar = "외부 변수";

    function inner() {
        console.log(outerVar); // 클로저: outerVar에 접근
    }

    return inner;
}

const closureFunc = outer();
closureFunc(); // "외부 변수" 출력

이 예제에서 inner 함수는 outer 함수가 종료된 후에도 outerVar에 접근할 수 있다. 이는 클로저가 외부 스코프의 변수를 "기억"하기 때문이다. 클로저는 캡슐화, 모듈 패턴, 콜백 함수 등에서 유용하게 사용된다.

호이스팅 (Hoisting)

JavaScript에서는 변수와 함수 선언이 스코프의 맨 위로 끌어올려지는 현상인 호이스팅이 발생한다. 단, var와 let/const의 동작이 다르다.

// var의 호이스팅
console.log(hoistedVar); // undefined
var hoistedVar = "hoisted";

// let의 호이스팅 (TDZ)
// console.log(hoistedLet); // ReferenceError
let hoistedLet = "hoisted";

호이스팅은 가시성과 밀접한 관련이 있으며, 코드 실행 순서를 이해하는 데 중요하다.

관련 문서 및 참고 자료

변수 가시성은 JavaScript의 동작 원리를 이해하는 데 핵심적인 개념이다. var, let, const의 적절한 사용과 스코프 규칙을 숙지함으로써, 더 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있다. 특히 블록 스코프와 클로저는 현대 JavaScript 개발에서 자주 활용되므로, 실무에서도 충분히 숙지해야 한다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?